<template>
	<my-field :label="data.label" :needRightIcon="false">
		<view class="flex items-center">
			<text v-text="text" class="px-2 text-sm text-gray-99"></text>
			<u-switch v-if="!data.readonly" v-model="obj.value" activeColor="#2d58cb" size="22" @change="switchChange"></u-switch>
		</view>
	</my-field>
</template>
<script>
import MyField from '@/pages_form/components/my-field.vue'
export default {
	components: {MyField},
    props: {
        data: {
            type: Object,
            required: true
        }
    },
    data(){
        return {
            text: '',
			obj: JSON.parse(JSON.stringify(this.data))
        }
    },
    created(){
        this.obj.value == this.data.config.activeValue;
        this.switchChange(this.obj.value);
    },
    methods:{
        selectEvent(){
            console.log(this.data);
        },
        switchChange(vbool){
            if (vbool) {
                this.obj.value = this.data.config.activeValue;
                this.text = this.data.config.activeText;
            } else {
                this.obj.value = this.data.config.inactiveValue;
                this.text = this.data.config.inactiveText;
            }
        }
    },
    watch:{
        'obj.value': {
    	    deep: true,
    	    handler() {
				this.$emit('fieldValueChange', this.obj)
    	    }
        }
    }
}
</script>

<style scoped>
.self-cell >>> .van-switch {
    position: absolute;
    top: 0;
    right: 0px;
}
</style>
